<template>
  <view class="container">
    <view class="log-list">
      <block v-for="(log, index) in logs" :key="index">
        <text class="log-item">{{ index + 1 }}. {{ log }}</text>
      </block>
    </view>
    
    <!-- 新增：日志操作区域 -->
    <view class="log-actions">
      <button class="btn" @tap="clearLogs">清空日志</button>
      <button class="btn" @tap="addTestLog">添加测试日志</button>
      <button class="btn" @tap="exportLogs">导出日志</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      logs: []
    }
  },
  onLoad() {
    this.loadLogs()
  },
  methods: {
    loadLogs() {
      const logs = uni.getStorageSync('logs') || []
      this.logs = logs.map(log => {
        const date = new Date(log)
        return date.toLocaleString()
      })
    },
    clearLogs() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有日志吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('logs')
            this.logs = []
            uni.showToast({
              title: '日志已清空',
              icon: 'success'
            })
          }
        }
      })
    },
    addTestLog() {
      const now = Date.now()
      const logs = uni.getStorageSync('logs') || []
      logs.unshift(now)
      uni.setStorageSync('logs', logs)
      this.loadLogs()
      uni.showToast({
        title: '测试日志已添加',
        icon: 'success'
      })
    },
    exportLogs() {
      if (this.logs.length === 0) {
        uni.showToast({
          title: '暂无日志',
          icon: 'none'
        })
        return
      }
      
      const logText = this.logs.join('\n')
      uni.setClipboardData({
        data: logText,
        success: () => {
          uni.showToast({
            title: '日志已复制到剪贴板',
            icon: 'success'
          })
        }
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.log-list {
  background-color: white;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.log-item {
  display: block;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  color: #333;
  font-size: 28rpx;
}

.log-item:last-child {
  border-bottom: none;
}

.log-actions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn {
  background-color: #007aff;
  color: white;
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
  text-align: center;
  border: none;
}

.btn:active {
  background-color: #0056b3;
}
</style>